<!--养殖规模  -->
<template>
	<border cardTitle="养殖规模"><Chart :optionData="option_column" style="height: 100%"></Chart></border>
</template>

<script>
import border from '../border.vue';
import StatisticsMixins from '../../StatisticsMixins';
let color = ['#2467ED', '#16E4CF', '#EBA62C'];
import { bigScreenApi } from '@/api/index';
import values from 'core-js/fn/object/values';
export default {
	components: { border },
	mixins: [StatisticsMixins],
	data() {
		return {
			option_column: {
				color: color,
				calculable: true,
				tooltip: {
					trigger: 'item'
					// formatter: '{a}<br/>{b}:{c}千万元'
				},
				legend: {
					show: true,
					type: 'scroll',
					top: 'top',
					itemGap: 20,
					padding: [20, 20],
					itemWidth: 12,
					itemHeight: 12,
					data: ['50头以下', '50-200头', '200-1000头', '1000头以上'],
					textStyle: {
						fontSize: 14,
						color: '#fff'
					}
				},
				series: {
					name: '',
					type: 'pie',
					radius: [37, 65],
					avoidLabelOverlap: false,
					startAngle: 180,
					center: ['50.1%', '29%'],
					roseType: 'area',
					selectedMode: 'single',
					label: {
						normal: {
							show: true,
							formatter: '{c}户',
							color: '#fff',
							borderColor: 'transparent'
						}
					},
					itemStyle: {
						normal: {
							label: {
								show: false
							},
							labelLine: {
								show: false
							}
						}
					},
					data: [
						{
							value: 1400.58,
							name: '1000头以上',
							itemStyle: {
								normal: {
									color: '#F846F1'
								}
							}
						},
						{
							value: 1200.58,
							name: '200-1000头',
							itemStyle: {
								normal: {
									color: '#4F44F4'
								}
							}
						},
						{
							value: 1100.58,
							name: '50-200头',
							itemStyle: {
								normal: {
									color: '#5081FE'
								}
							}
						},

						{
							value: 0,
							name: '',
							label: {
								normal: {
									show: false
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(0,0,0,0)',
									label: {
										show: false,
										color: 'rgba(0,0,0,0)'
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							value: 0,
							name: '',
							itemStyle: {
								normal: {
									color: 'rgba(0,0,0,0)',
									label: {
										show: false,
										color: 'rgba(0,0,0,0)'
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							value: 0,
							name: '',
							itemStyle: {
								normal: {
									color: 'rgba(0,0,0,0)',
									label: {
										show: false,
										color: 'rgba(0,0,0,0)'
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							value: 0,
							name: '',
							label: {
								normal: {
									show: false
								}
							},
							itemStyle: {
								color: 'rgba(0,0,0,0)',
								normal: {
									label: {
										show: false,
										color: 'rgba(0,0,0,0)'
									},
									labelLine: {
										show: false
									}
								}
							}
						}
					]
				}
			}
		};
	},
	props: {
		level: {
			type: [String, Number],
			default: 0
		},
		cityId: {
			type: [String, Number],
			default: ''
		}
	},
	watch: {
		level: {
			handler(newV, oldV) {
				this.getInfo();
			},
			immediate: true
		}
	},
	created() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			let data = [
				{
					value: 600.58,
					name: '50头以下',
					itemStyle: {
						normal: {
							color: '#4BE9FF'
						}
					}
				},
				{
					value: 1100.58,
					name: '50-200头',
					itemStyle: {
						normal: {
							color: '#5081FE'
						}
					}
				},
				{
					value: 1200.58,
					name: '200-1000头',
					itemStyle: {
						normal: {
							color: '#4F44F4'
						}
					}
				},
				{
					value: 1400.58,
					name: '1000头以上',
					itemStyle: {
						normal: {
							color: '#F846F1'
						}
					}
				}
			];
			this.$postAction(bigScreenApi.scaleCount, {
				xzqhbm: this.level > 1 ? this.cityId : '',
				level: this.level
			}).then(res => {
				if (res && res.code == 1) {
					let cowData = res.data;

					this.option_column.series.data = data
						.map((item, index) => {
							let value;
							if (index == 0) {
								value = cowData.oneCount;
							} else if (index == 1) {
								value = cowData.twoCount;
							} else if (index == 2) {
								value = cowData.thrCount;
							} else if (index == 3) {
								value = cowData.fouCount;
							} else {
								value = 0;
							}
							return {
								...item,
								value: value
							};
						})
						.sort((a, b) => {
							return a.value - b.value;
						});

					this.option_column.series.data.unshift(
						{
							value: 0,
							name: '',
							label: {
								normal: {
									show: false
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(0,0,0,0)',
									label: {
										show: false,
										color: 'rgba(0,0,0,0)'
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							value: 0,
							name: '',
							label: {
								normal: {
									show: false
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(0,0,0,0)',
									label: {
										show: false,
										color: 'rgba(0,0,0,0)'
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							value: 0,
							name: '',
							label: {
								normal: {
									show: false
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(0,0,0,0)',
									label: {
										show: false,
										color: 'rgba(0,0,0,0)'
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							value: 0,
							name: '',
							label: {
								normal: {
									show: false
								}
							},
							itemStyle: {
								color: 'rgba(0,0,0,0)',
								normal: {
									label: {
										show: false,
										color: 'rgba(0,0,0,0)'
									},
									labelLine: {
										show: false
									}
								}
							}
						}
					);
					console.log(this.option_column.series.data);
				}
			});
		}
	}
};
</script>

<style></style>
